{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            position: relative;
        }

        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<script src="{% static 'panorama/lib/three.js/three.js' %}"></script>
<script src="{% static 'panorama/lib/three.js/OrbitControls.js' %}"></script>
<script>
    var camera, scene, renderer;
    var mesh;
    var texture;
    var orbitControls;

    function start() {
        init();
        animate();
    }

    function init() {

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        var stage = renderer.domElement;
        document.body.appendChild(stage);
        //
        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 0.1;
        orbitControls = new THREE.OrbitControls(camera, stage);
        scene = new THREE.Scene();

        var geometry = new THREE.SphereGeometry(200, 80, 80);


        var lowPartList = [
            ['/static/panorama/img/merge/low/test_01.jpg', '/static/panorama/img/merge/low/test_02.jpg', '/static/panorama/img/merge/low/test_03.jpg', '/static/panorama/img/merge/low/test_04.jpg', '/static/panorama/img/merge/low/test_05.jpg'],
            ['/static/panorama/img/merge/low/test_06.jpg', '/static/panorama/img/merge/low/test_07.jpg', '/static/panorama/img/merge/low/test_08.jpg', '/static/panorama/img/merge/low/test_09.jpg', '/static/panorama/img/merge/low/test_10.jpg'],
            ['/static/panorama/img/merge/low/test_11.jpg', '/static/panorama/img/merge/low/test_12.jpg', '/static/panorama/img/merge/low/test_13.jpg', '/static/panorama/img/merge/low/test_14.jpg', '/static/panorama/img/merge/low/test_15.jpg']
        ];
        var highPartList = [
            ['/static/panorama/img/merge/high/test_01.jpg', '/static/panorama/img/merge/high/test_02.jpg', '/static/panorama/img/merge/high/test_03.jpg', '/static/panorama/img/merge/high/test_04.jpg', '/static/panorama/img/merge/high/test_05.jpg'],
            ['/static/panorama/img/merge/high/test_06.jpg', '/static/panorama/img/merge/high/test_07.jpg', '/static/panorama/img/merge/high/test_08.jpg', '/static/panorama/img/merge/high/test_09.jpg', '/static/panorama/img/merge/high/test_10.jpg'],
            ['/static/panorama/img/merge/high/test_11.jpg', '/static/panorama/img/merge/high/test_12.jpg', '/static/panorama/img/merge/high/test_13.jpg', '/static/panorama/img/merge/high/test_14.jpg', '/static/panorama/img/merge/high/test_15.jpg']
        ];
        var imgWidth = 6144;  // 完整图片宽
        var imgHeight = 3072;  // 完整图片高
        var partWidth = 1228;  // 切图宽
        var partHeight = 1024;  // 切图高

        var column = lowPartList[0].length;  // 列数
        var row = lowPartList.length;  // 行数

        var canvas = document.createElement("canvas");
        canvas.width = imgWidth;
        canvas.height = imgHeight;
        document.body.appendChild(canvas);
        var ctx = canvas.getContext("2d");
        for (var i = 0; i < row; i++) {
            for (var j = 0; j < column; j++) {
                var imgObj = new Image();
                imgObj.src = lowPartList[i][j];
                (function (imgObj, i, j) {
                    imgObj.onload = function () {
                        ctx.drawImage(imgObj, j * partWidth, i * partHeight);
                        texture && (texture.needsUpdate = true);
                    };
                })(imgObj, i, j);
            }
        }

        window.setTimeout(function () {

            for (i = 0; i < row; i++) {
                for (j = 0; j < column; j++) {
                    imgObj = new Image();
                    imgObj.src = highPartList[i][j];
                    (function (imgObj, i, j) {
                        imgObj.onload = function () {
                            ctx.drawImage(imgObj, j * partWidth, i * partHeight);
                            texture && (texture.needsUpdate = true);
                        };
                    })(imgObj, i, j);
                }
            }
        }, 20000);


        texture = new THREE.Texture(canvas);
        var material = new THREE.MeshBasicMaterial({map: texture, side: THREE.DoubleSide});
        texture.needsUpdate = true;
        mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, 0, 0);
        mesh.rotation.y = Math.PI;
        scene.add(mesh);

        window.addEventListener('resize', onWindowResize, false);
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
        orbitControls.update();
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }

    start();
</script>
</body>
</html>
